<template>
  <div class="chat">
    <van-nav-bar :title="Title" fixed :left-arrow="true" @click-left="onClickLeft"></van-nav-bar>
    <!-- 聊天室 -->
    <div class="chatRoom" :style="showEmiji?'padding-bottom:11.9rem':''" ref="toBottomScroll">
        <ul class="clearfix">
          <template v-for="i,index in initialMessages" :key="index">
            <li class="text-li fr tr clearfix" v-if="i.from.table == `user`">
              <div class="time" v-show="i.showTime">{{ i.time }}</div>
              <div class="cont fr">
                <div class="text">{{ i.content.text }}</div><img :src="user.avatar" alt="">
              </div>
            </li>
            <li class="text-li fl tl clearfix" v-else>
              <div class="time" v-show="i.showTime">{{ i.time }}</div>
              <div class="cont fl">
                <img :src="i.from.avatar" alt=""><div class="text">{{ i.content.text }}</div>
              </div>
            </li>
          </template>
        </ul>
    </div>
    <!-- 输入框 -->
    <div class="far_box" ref="editHeight">
      <div class="edit">
        <van-field type="textarea" class="input" v-model="chatText" @blur="blurEvent" @focus="focusEvent"/>
        <div class="icon" @click="()=>{showEmiji = !showEmiji}"><svg t="1679043896450" class="icon" viewBox="0 0 1025 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2416" width="28" height="28"><path d="M512.016 1024C229.232 1024 0.016 794.784 0.016 512 0.016 229.216 229.232 0 512.016 0 794.784 0 1024 229.216 1024 512 1024 794.784 794.784 1024 512.016 1024ZM512.016 64C264.976 64 64.016 264.96 64.016 512 64.016 759.024 264.976 960 512.016 960 759.04 960 960 759.024 960 512 960 264.96 759.04 64 512.016 64ZM510.336 833.456C509.056 833.456 507.744 833.488 506.448 833.488 310.992 833.488 229.024 657.12 225.616 649.552 218.336 633.424 225.488 614.496 241.584 607.216 257.712 599.968 276.576 607.088 283.888 623.088 286.64 629.12 352.928 769.488 506.576 769.488 507.584 769.488 508.576 769.456 509.584 769.456 672.896 767.552 738.368 624.768 739.024 623.344 746.176 607.216 765.024 599.872 781.264 607.152 797.392 614.336 804.672 633.248 797.456 649.408 794.176 656.8 714.208 831.056 510.336 833.456ZM671.504 479.84C636.224 479.84 607.664 451.232 607.664 415.984 607.664 380.768 636.224 352.176 671.504 352.176 706.768 352.176 735.344 380.768 735.344 415.984 735.344 451.232 706.768 479.84 671.504 479.84ZM351.504 479.84C316.224 479.84 287.664 451.232 287.664 415.984 287.664 380.768 316.224 352.176 351.504 352.176 386.768 352.176 415.344 380.768 415.344 415.984 415.344 451.232 386.768 479.84 351.504 479.84Z" p-id="2417" fill="#707070"></path></svg></div>
        <van-button type="success" size="small" @click="sendMag()">发送</van-button>
      </div>
      <div class="emo" v-show="showEmiji">
        <ul class="clearfix">
          <li class="fl" v-for="i,index in emoji" :key="index" @click="setEmo(i)">{{ i }}</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref,inject } from 'vue'
  import { useRoute,onBeforeRouteLeave, onBeforeRouteUpdate} from "vue-router";
  import emoji from '../../utils/emoji'
  import {initWebSocket,webscoketDealData} from '../../utils/websocket.js'
  import { showFailToast } from 'vant'
  import formatTime from '../../utils/time.js'
  let user = JSON.parse(localStorage.getItem('user'))

  const showEmiji = ref(false)

  const route = useRoute()
  const Title:String = ref(route?.query.name)
  const token = localStorage.getItem('user_token')
  const global:String = inject('global')
  const WebSocketUrl = ref(global?.ws+'/chatserver/user/'+user.id+'/'+token)

  const inputFcoes = ref(0)

  const initialMessages = ref([]);
  const showTime = ref(false)
  const toBottomScroll = ref(null)
  const editHeight = ref(null)


  //连接通讯
  const websocket = initWebSocket(WebSocketUrl.value)
  const chatText = ref('')
  //接收信息
  websocket.onmessage = (res)=>{
    initialMessages.value.push(JSON.parse(res.data))
    toBottomScroll.value.scrollTo({ top: toBottomScroll.value.scrollHeight, behavior: 'smooth' })
  }

  const sendMag = ()=>{
    if(!chatText.value || chatText.value === '' || chatText.value === undefined || chatText.value === null){
      showFailToast('不能发送空信息！')
      return false;
    }
    let message = {
      from: {
        table:'user',
        id:user.id,
        name:user.name,
        avatar:user.avatar
      },
      to:{
        table:'enterprise',
        id:route.query.enterprise,
        avatar:''
      },
      showTime:false,
      time:formatTime.formatTime(new Date()),
      content: {
        text:chatText.value,
        picUrl:''
      }
    }
    if(message.content.text){
      message.time = formatTime.formatTime(new Date())
      message.content.text = chatText.value
    } else if(message.content.picUrl){
      message.time = formatTime.formatTime(new Date())
      message.content.picUrl = chatText.value
    }
    if(initialMessages.value.length){
      message.showTime = formatTime.checkAuditTime(initialMessages?.value[initialMessages.value.length-1].time,10)
    }else{
      message.showTime = true
    }
    let sendRes = websocket.send(JSON.stringify(message))
    initialMessages.value.push(message)
    toBottomScroll.value.scrollTo({ top: toBottomScroll.value.scrollHeight, behavior: 'smooth' })
    chatText.value = ''
  }
  

  const onInput = (e)=>{
    console.log(e)
  }
  const clearTextarea = ()=>{
    console.log()
  }
  const onClickLeft = () => {
		history.back();
	}

  const showEmo = () => {

  }
  const setEmo = (e) => {
    chatText.value = chatText.value.slice(0,inputFcoes.value) + e + chatText.value.slice(inputFcoes.value)
  }
  const focusEvent = (e)=>{
    inputFcoes.value = e.srcElement.selectionStart
  } 
  const blurEvent = (e) => {
    inputFcoes.value = e.srcElement.selectionStart
  }
</script>

<style lang="scss" scoped>
  .chat{
    height: 100%;overflow: hidden;box-sizing: border-box;
    .chatRoom{
      width: 100%;height: 100vh;box-sizing: border-box;padding: 0 0.5rem; margin: 0 auto;overflow-y: scroll;
      ul{padding-bottom: 5rem;}
      .tr{text-align: right;}
      .tl{text-align: left;}
      .text-li{
        width: 100%;margin-top: 1rem;
        .cont.fr{
          display: flex;justify-content: end;align-items: flex-start;
          .text{background-color: #1edd37;padding: 0.6rem;border-radius: 0.5rem;margin-right: 1rem;position: relative;max-width: 65%;text-align: left;white-space: pre-line;
            &::after{content:'';width: 0;height: 0;position: absolute;right: -1rem;top: 0.8rem;z-index: -1; border-width: 0.5rem;border-style: solid;
             border-color: transparent transparent transparent #1edd37 ;}
             span{font-size: 1.5rem;}
          }
        }
        .cont.fl{
          display: flex;justify-content: start;align-items: flex-start;
          .text{background-color: #818181;color: #fff;text-align: left;white-space: pre-line;
            padding: 0.6rem;border-radius: 0.5rem;margin-left: 1rem;position: relative;max-width: 60%;
            &::after{content:'';width: 0;height: 0;position: absolute;left: -1rem;top: 0.8rem;z-index: -1; border-width: 0.5rem;border-style: solid;
             border-color: transparent #818181 transparent transparent;}
             span{font-size: 1.5rem;}
          }
        }
        .time{text-align: center;color: #888;margin-bottom: 1rem;}
        img{width: 3rem;height: 3rem;border-radius: 50%;object-fit: cover;object-position: center;box-shadow: 0 0 0.5rem 0.2083rem rgba(0,0,0,0.1);}
      }
    }
    .far_box{
      padding: 0.5rem;box-sizing: border-box;background-color: #fff;
      width: 100%;position: fixed;bottom: 0;left: 0;
      box-shadow: 0 0 0.5rem 0.2083rem rgba(0,0,0,0.1);
      .edit{
        display: flex;align-items: center;
        .van-cell{padding: 0.2rem 0.3rem;}
        .input{border: 0;height: 2rem;background-color: #fafafa;border-radius: 0.5rem;width: 19rem;}
        .icon{
          border-radius: 50%;margin: 0 0.3rem;display: flex;justify-content: center;align-content: center;
        }
        button{height: 1.9rem;}
      }
      .emo{padding: 0.5rem 0;max-height:9.5rem;overflow-y: scroll;
        ul{
          li{
            font-size: 1.85rem;margin-right: 0rem;cursor: pointer;
          }
        }
      }
    }
  }
</style>
